<template>
    <div class="real_time_word" v-if="movie">
        <div class="real_time_top">
            <div class="logo_icon"><img src="@/assets/images/logo_icon.png" alt=""><span>实时口碑</span></div>
            <div class="movie_wish"><span>{{movie.wish}}人想看</span>&nbsp;&nbsp;&nbsp;<span>{{movie.watched}}人看过</span></div>
        </div>
        <div class="real_time_score" v-if="movie.sc">
            <div class="_score"><p>{{movie.sc}}</p><p>{{movie.snum}}人评</p></div>
            <div class="appraise_wrapper"  >
                <div class="appraise_list" v-for="(item,index) in movie.distributions" :key="index">
                    <img class="stars" v-for="(items,indexs) in 5-Number(index)" :key="indexs" src="@/assets/images/stars.png" alt="">
                    <div class="percentage_bar">
                        <div :style="{width:Math.floor(item.proportion)+'%'}"></div>
                    </div>
                    <div class="percentage">{{item.proportion}}%</div>
                </div>
            </div>
        </div>
        <!--  -->
        <div v-else class="real_time_wish">{{movie.wish}}人想看</div>
        <div class="real_time_appraise"></div>
    </div>
</template>
<script>
export default {
    props:['movie'],
}
</script>
<style scopde>
    .real_time_word{
        padding: 10px 12px;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 5px;
    }
    .real_time_top{
        display: flex;flex-direction: row;justify-content: space-between;
    }
    .movie_wish{
        font-size: 12px;color: #fff;opacity: 0.6;
    }
    .logo_icon{
        font-size: 12px;color: #fff;
    }
    .logo_icon img{
        width: 14px;height: 14px;vertical-align: middle
    }
    .logo_icon span{
        vertical-align: middle;
        padding-left: 3px
    }
    .real_time_score{
        display: flex;flex-direction: row;justify-content: center;align-items: center;
        padding: 20px 0;border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    }
    .real_time_score p:first-child{ 
        font-size: 35px;color: #ffb400;font-weight: bold;
    }
    .real_time_score p:nth-child(2){
        font-size: 12px;color: #fff;opacity: 0.6;
    }

    /* 未上映详情 */
    .real_time_wish{
        padding: 20px 0;border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        color: #ffb400;font-size: 22px;;text-align: center
    }
    .appraise_wrapper{
        display: flex;flex-direction: column;justify-content: space-between;
    }
    .appraise_list{
        font-size: 12px;color:#fff;opacity: 0.6;
        display: flex;flex-direction: row;justify-content: space-around;align-items: center
    }
    .stars{
        width: 5px;height: 5px;vertical-align:middle;
    }
    .percentage_bar{
        margin:0 4px;
        width: 76px;
        height: 5px;
        background: rgba(0, 0, 0, 0.4)
    }
    .percentage_bar div{
        /* width:76%; */
        height: 5px;
        background: #ffb400;
    }
</style>